<template>
  <div>
    <div class="prev">
      <van-icon name="arrow-left" @click="btnPrev" />
    </div>

    <div class="bgc"  :style="{backgroundImage:`url(${img})`,backgroundSize:'cover'} ">
    </div>
    <div class="info">
      <van-image
        width="3.2rem"
        height="2.666rem"
        style="border-radius:15px; overflow:hidden;"
        :src="img"
      />
      <div class="text">
        {{ songListDetails.name }}
      </div>
    </div>
    <SSongItem
    v-for="item in songList"
    :key="item.id"
    :name="item.name"
    :author="item.ar[0].name"
    :id="item.id"
    ></SSongItem>
  </div>
</template>

<script>
import { getSongListApi, getSongListDetailsApi } from '@/api';
import SSongItem from '@/components/sSongItem.vue';
export default {
  data() {
    return {
      id: this.$route.query.id,
      songList: [],
      songListDetails: [],
      img:''
    }
  },
  components: {
    SSongItem
  },
 async created() {
   const res = await getSongListApi({ id: this.id,limit:20 })
   this.songList = res.data.songs
   const result = await getSongListDetailsApi({ id: this.id })
   console.log(result);
   this.songListDetails = result.data.playlist
  this.img = this.songListDetails.coverImgUrl
  },
  methods: {
    btnPrev() {
      this.$router.push({
        path:'/layout/home'
      })
    }
  }
}
</script>

<style scoped lang="less">
.prev {
  padding-top: .2667rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.bgc{
  height: 4.5rem;
filter: blur(40px);
}
.info{
  display: flex;
  position: absolute;
  left: .5333rem;
  top: .7rem;
  flex: 1;
  .text {
    padding: 1.0667rem .5333rem;
    font-size: .4rem;
  }
}

</style>